<template>
  <div class="task-common-advanced-search-form">
    <div class="search-row">
      <div class="search-row__label">{{$t('task.components.list.quickCondition')}}：</div>
      <div class="search-row__content">
        <el-tag class="__tag" type="info">
          {{$t('common.base.statusAngle')}}：{{ state }}
          {{ taskState === 'exception' ? `(${node})` : '' }}
        </el-tag>
        <el-tag class="__tag" type="info"> {{$t('common.base.createAngle')}}：{{ angle }} </el-tag>
        <el-tag class="__tag" type="info"> {{$t('common.task.taskType')}}：{{ type }} </el-tag>
        <!-- <el-tag class="__tag" type="info"> 异常节点：{{ node }} </el-tag> -->
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'task-common-advanced-search-form',
  props: {
    // 工单类型
    taskState: {
      type: String,
      default: () => 'all',
    },
    // 工单状态下拉配置
    stateOptions: {
      type: Array,
      default: () => [],
    },

    // 创建视角
    visualAngle: {
      type: String,
      default: 'all',
    },
    // 创建视角下拉配置
    visualAngleOptions: {
      type: Array,
      default: () => [],
    },

    // 工单类型
    taskType: {
      type: String,
      default: '',
    },
    // 工单类型下拉配置
    typeOptions: {
      type: Array,
      default: () => [],
    },

    // 异常节点
    exceptionNodes: {
      type: String,
      default: 'all',
    },
    // 工单类型下拉配置
    exceptionNodeOptions: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    // 工单类型
    const state = computed(
      () =>
        props.stateOptions?.find(item => item.value === props.taskState)
          ?.label || ''
    );
    // 创建视角
    const angle = computed(
      () =>
        props.visualAngleOptions?.find(item => item.value === props.visualAngle)
          ?.label || ''
    );
    // 工单状态
    const type = computed(
      () =>
        props.typeOptions?.find(item => item.id === props.taskType)?.name || ''
    );
    // 异常节点
    const node = computed(
      () =>
        props.exceptionNodeOptions?.find(
          item => item.englishName === props.exceptionNodes
        )?.exceptionName || ''
    );

    return {
      state,
      angle,
      type,
      node,
    };
  },
});
</script>
<style lang="scss">
.task-common-advanced-search-form {
  margin-bottom: 16px;

  .search-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    .search-row__label {
      margin-right: 10px;
      width: 70px;
    }
    .search-row__content {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .__tag {
      margin-right: 8px;
      flex: 0 0 auto;
      max-width: 180px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
